<div id="content">
				<!-- row -->
				<div class="row">
					<!-- col -->
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
						<h1 class="page-title txt-color-blueDark"><!-- PAGE HEADER --><i class="fa fa-lg fa-fw fa-cube"></i> SmartAdmin Intel <span>&gt;
							App Settings </span></h1>
					</div>
					<!-- end col -->
				</div>
				<!-- end row -->
				<!--
				The ID "widget-grid" will start to initialize all widgets below
				You do not need to use widgets if you dont want to. Simply remove
				the <section></section> and you can use wells or panels instead
				-->
				<!-- widget grid -->
				<section id="widget-grid" data-widget-grid>
					<!-- row -->
					<div class="row">
						<!-- NEW WIDGET START -->
						<article class="col-xs-12 col-sm-12 col-md-12 col-lg-7">
							<!-- Widget ID (each widget will need unique ID)-->
							<div id="menu-toggle-collapse-minify-widget" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-jarvis-widget>
								<header>
									<h2> Menu Toggle / Collapse / Minify </h2>
									<span class="badge pull-right margin-right-5 margin-top-5">new</span>
								</header>
								<!-- widget div-->
								<div>
									<!-- widget content -->
									<div class="widget-body no-padding">
										<!-- this is what the user will see -->
										<div class="padding-gutter">
											To toggle minify menu manually add the class <code>
												minified</code>
											to the <b><i>BODY</i></b> element. To collapse the main menu on desktops, add class <code>
												hidden-menu</code>
											to the <b><i>BODY</i></b> element.
											<br>
											<br>
											<span class="btn btn-default" minify-menu> Toggle .minify class </span>
											&#xA0;&#xA0;
											<button class="btn btn-default" toggle-menu>
												Toggle .collapse class
											</button>
										</div>
										<div class="table-responsive no-margin">
											<table class="table table-bordered">
												<thead>
													<tr>
														<th><b><i>attribute*</i></b></th>
														<th>Description</th>
														<th>Action</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td>
														<code>
															data-action=&quot;userLogout&quot;
														</code></td>
														<td>Logout message popup, use it with <code>
															data-logout-msg = &quot;...&quot;</code></td>
														<td><a href="login.html" class="btn btn-default btn-xs" data-action="userLogout" data-logout-msg="Your message here..."> action </a></td>
													</tr>
													<tr>
														<td>
														<code>
															data-action=&quot;resetWidgets&quot;
														</code></td>
														<td>Resets all localStorage <i>(restores all app settings and widgets)</i></td>
														<td>
														<button class="btn btn-default btn-xs" data-action="resetWidgets">
															action
														</button></td>
													</tr>
													<tr>
														<td>
														<code>
															data-action=&quot;launchFullscreen&quot;
														</code></td>
														<td>Launch full screen view <i>(works only in Chrome, Safari, Firefox and Latest IE)</i></td>
														<td>
														<button class="btn btn-default btn-xs" data-action="launchFullscreen">
															action
														</button></td>
													</tr>
													<tr>
														<td>
														<code>
															data-action=&quot;minifyMenu&quot;
														</code></td>
														<td>Minify main nav <i>(works only with vertical menu case)</i></td>
														<td>
														<button class="btn btn-default btn-xs" data-action="minifyMenu">
															action
														</button></td>
													</tr>
													<tr>
														<td>
														<code>
															data-action=&quot;toggleMenu&quot;
														</code></td>
														<td>Collapse left menu <i>(but still accessable by hovering left edge of screen)</i></td>
														<td>
														<button class="btn btn-default btn-xs" data-action="toggleMenu">
															action
														</button></td>
													</tr>
													<tr>
														<td>
														<code>
															data-action=&quot;toggleShortcut&quot;
														</code></td>
														<td>Top slidedown / Metro menu toggle</td>
														<td>
														<button class="btn btn-default btn-xs" data-action="toggleShortcut">
															action
														</button></td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
									<!-- end widget content -->
								</div>
								<!-- end widget div -->
							</div>
							<!-- end widget -->
							<!-- Widget ID (each widget will need unique ID)-->
							<div id="app-settings-widget" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-jarvis-widget>
								<header>
									<h2>App Settings</h2>
								</header>
								<!-- widget div-->
								<div>
									<!-- widget content -->
									<div class="widget-body no-padding">
										<!-- this is what the user will see -->
										<div class="padding-gutter">
											<span class="badge bg-color-green">Note:</span> You can adjust these settings inside <span class="text-primary">app.js</span> file to your comfort.
										</div>
										<div class="table-responsive">
											<table class="table table-bordered margin-top-10">
												<thead>
													<tr>
														<th>Name</th>
														<th>Default/Value</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><b><i>$.throttle_delay</i></b></td>
														<td>
														<code>
															350
														</code></td>
														<td>Impacts the responce rate of some of the responsive elements (lower value affects CPU but improves speed)</td>
													</tr>
													<tr>
														<td><b><i>$.menu_speed</i></b></td>
														<td>
														<code>
															235
														</code></td>
														<td>The rate at which the menu expands revealing child elements on click</td>
													</tr>
													<tr>
														<td><b><i>$.navAsAjax</i></b></td>
														<td>
														<code>
															true/false
														</code></td>
														<td>Your left nav in your app will no longer fire ajax calls, set it to false for HTML version</td>
													</tr>
													<tr>
														<td><b><i>$.enableJarvisWidgets</i></b></td>
														<td>
														<code>
															true/false
														</code></td>
														<td>Please make sure you have included &quot;jarvis.widget.min.js&quot; in your page for this below feature to work</td>
													</tr>
													<tr>
														<td><b><i>$.enableMobileWidgets</i></b></td>
														<td>
														<code>
															true/false
														</code></td>
														<td>Warning: Enabling mobile widgets could potentially crash your webApp if you have too many widgets running at once (<i>must have <b><i>$.enableJarvisWidgets</i></b> to
														<code>true</code></i>)</td>
													</tr>
													<tr>
														<td><b><i>closedSign</i></b></td>
														<td>
														<code>
															fa-plus-square-o
														</code></td>
														<td>Menu open icon</td>
													</tr>
													<tr>
														<td><b><i>openedSign</i></b></td>
														<td>
														<code>
															fa-minus-square-o
														</code></td>
														<td>Menu close icon</td>
													</tr>
													<tr>
														<td><b><i>setup_widgets_desktop()</i></b></td>
														<td><i>function<b>()</b></i></td>
														<td>Setup widgets for desktop (<i>must have <b><i>$.enableJarvisWidgets</i></b> to
														<code>
															true
														</code></i>) </td>
													</tr>
													<tr>
														<td><b><i>setup_widgets_mobile()</i></b></td>
														<td><i>function<b>()</b></i></td>
														<td>Setup widgets for desktop <i>(must have <b>$.enableJarvisWidgets</b> and <b>$.enableMobileWidgets</b> to <code>true</code>)</i></td>
													</tr>
													<tr>
														<td><b><i>runAllCharts()</i></b></td>
														<td><i>function<b>()</b></i></td>
														<td>Runs all inline charts including: $.sparkline and $.easyPieChart</td>
													</tr>
													<tr>
														<td><b><i>runAllForms()</i></b></td>
														<td><i>function<b>()</b></i></td>
														<td>Runs all form related scripts such as $.select2, $.mask, $.datepicker and $.autocomplete</td>
													</tr>
													<tr>
														<td><b><i>pageSetUp()</i></b></td>
														<td><i>function<b>()</b></i></td>
														<td>Runs the following functions all at once: <i>setup_widgets_desktop<b>()</b>, setup_widgets_mobile<b>()</b>, runAllCharts<b>()</b>, runAllForms<b>()</b></i> - and also activates all tooltip and popovers</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
									<!-- end widget content -->
								</div>
								<!-- end widget div -->
							</div>
							<!-- end widget -->
						</article>
						<!-- WIDGET END -->
						<article class="col-xs-12 col-sm-12 col-md-12 col-lg-5">
							<!-- Widget ID (each widget will need unique ID)-->
							<div id="page-layout-options-widget" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-jarvis-widget>
								<header>
									<h2> Page layout options </h2>
								</header>
								<!-- widget div-->
								<div>
									<!-- widget content -->
									<div class="widget-body no-padding">
										<div class="padding-gutter padding-bottom-0">
											Possible classes for the <b><i>BODY</i></b> tag: <code>
												smart-skin-{SKIN_NUMBER}</code>
											, <code>
												smart-rtl</code>
											, <code>
												fixed-header</code>
											, <code>
												fixed-navigation</code>
											, <code>
												fixed-ribbon</code>
											, <code>
												fixed-footer</code>
											, <code>
												container</code>
										</div>
										<!-- this is what the user will see -->
										<div class="padding-gutter">
											<div style="background: #f1f1f1;border-radius:3px;overflow: hidden">
												<div style="width: 100%;height: auto;background:#ddd;font-size:11px;font-weight: bold;padding:13px 10px">
													<img src="styles/img/logo.png" alt="SmartAdmin" style="width:75px;">
												</div>
												<div style="width: 25%;height: 296px; background:#949291;" class="pull-left"></div>
												<div style="width: 75%;height: 255px; background:#f1f1f1;" class="pull-left">
													<div style="width: 100% height:20px; padding:3px; background:#C5C5C5; font-size:10px; font-weight: bold;">
														<i class="fa fa-home"></i> breadcrumb &gt;
													</div>
												</div>
												<div style="width: 75%;height: auto;background:#ddd;font-size:11px;font-weight: bold;padding:13px 10px" class="text-right pull-right">
													Footer
												</div>
											</div>
										</div>
										<hr>
										<div class="padding-gutter padding-top-0 padding-bottom-0">
											Switch to top menu by adding class <code>
												.menu-on-top</code>
										</div>
										<div class="padding-gutter">
											<div style="background: #f1f1f1;border-radius:3px;overflow: hidden">
												<div style="width: 100%;height: auto;background:#ddd;font-size:11px;font-weight: bold;padding:13px 10px">
													<img src="styles/img/logo.png" alt="SmartAdmin" style="width:75px;">
												</div>
												<div style="width: 100%;height: 50px; background:#949291;" class="pull-left"></div>
												<div style="width: 100%;height: 255px; background:#f1f1f1;" class="pull-left">
													<div style="width: 100%; height:20px; padding:3px; background:#C5C5C5; font-size:10px; font-weight: bold;">
														<i class="fa fa-home"></i> breadcrumb &gt;
													</div>
												</div>
												<div style="width: 100%;height: auto;background:#ddd;font-size:11px;font-weight: bold;padding:13px 10px" class="text-right pull-right">
													Footer
												</div>
											</div>
										</div>
									</div>
									<!-- end widget content -->
								</div>
								<!-- end widget div -->
							</div>
							<!-- end widget -->
						</article>
					</div>
					<!-- end row -->
					<!-- row -->
					<div class="row">
						<!-- a blank row to get started -->
						<div class="col-sm-12">
							<!-- your contents here -->
						</div>
					</div>
					<!-- end row -->
				</section>
				<!-- end widget grid -->
			</div>